<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1</title>
    <style>
        table {
            font-size: 18px;
            font-weight: 300;
            border-collapse: collapse;
        }

        input,
        button,
        select,
        textarea {
            outline: none;
            border-radius: 10px;
            border: 1px solid #aaa;
        }

        tr {
            border-bottom: 2px solid rgba(0, 0, 0, .2);
        }

        .inp-all {
            width: 300px;
            height: 30px;
            font-size: 18px;
            padding: 5px 20px;
        }


        .btn-reset {
            display: block;
            width: 100px;
            height: 30px;
            border-radius: 8px;
            border: none;
            margin: 0 auto;
            background-color: orange;
        }

        .btn-submit {
            display: block;
            width: 100px;
            height: 30px;
            border-radius: 8px;
            border: none;
            margin: 0 auto;
            background-color: #6cf;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <h2>问卷调查</h2>
        </thead>
        <tbody>
            <form action="./2.html" method="post" enctype="multipart/form-data">
                <tr>
                    <th><label for="name">姓名</label></th>
                    <td colspan="3"><input class="inp-all" type="text" name="name" id="name" autocomplete="off"
                            placeholder="请输入姓名">
                    </td>
                </tr>

                <tr>
                    <th><label for="gender">性别</label></th>
                    <td><input type="radio" name="gender" value="1" id="gender">男</td>
                    <td><input type="radio" name="gender" value="0" id="gender">女</td>
                </tr>

                <tr>
                    <th><label for="age">年龄</label></th>
                    <td colspan="3"><input class="inp-all" type="number" name="age" id="age"></td>
                </tr>

                <tr>
                    <th><label for="hobbies">爱好</label></th>
                    <td><input type="checkbox" name="hobbies" value="sing" id="hobbies">唱歌</td>
                    <td><input type="checkbox" name="hobbies" value="dance" id="hobbies">跳舞</td>
                    <td><input type="checkbox" name="hobbies" value="basketball" id="hobbies">打篮球</td>
                </tr>

                <tr>
                    <th>
                        <label for="city">工作地址</label>
                    </th>
                    <td class="3">
                        <select name="city" id="city" size="1">
                            <option value="none">---请选择工作地址---</option>
                            <option value="shanghai">上海</option>
                            <option value="shanghai">北京</option>
                            <option value="shanghai">广州</option>
                            <option value="shanghai">南京</option>
                            <option value="shanghai">杭州</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><label for="avatar">上传头像</label></th>
                    <td colspan="3"><input type="file" name="avatar" id="avatar"></td>
                </tr>

                <tr>
                    <th>
                        <label for="description">详细信息</label>
                    </th>
                    <td colspan="3">
                        <textarea name="description" id="description" cols="30" rows="10"></textarea>
                    </td>
                </tr>

                <tr>
                    <td colspan="2"><input type="reset" class="btn-reset" value="重置"></td>
                    <td colspan="2"><input type="submit" class="btn-submit" value="提交"></td>
                </tr>

            </form>
        </tbody>
    </table>
</body>

</html>